import React from 'react';
import Counter from '../../UI/Counter/Counter';

import classes from './Meal.module.css';

const Meal = ({ meal, isDescDisplayed}) => {

	return (
		<div className={classes.Meal}>
			<div className={classes.ImgBox}>
				<img src={meal.imgUrl} alt="meal" />
			</div>
			<div className={classes.details}>
				<h2 className={classes.Title}> {meal.title} </h2>

				{isDescDisplayed && <p className={classes.Desc} > {meal.desc} </p>}

				<div className={classes.BottomBox}>
					<p className={classes.Price}>
						{meal.price}
					</p>
					<Counter meal={meal} />
				</div>
			</div>
		</div>
	)
}

export default Meal